/* eslint-disable @typescript-eslint/ban-types */
import React, { FC } from 'react';

import { ReactComponent as Notes } from '@/assets/images/profile/Notes.svg';
import { ReactComponent as Wallet } from '@/assets/images/profile/Wallet.svg';
import { BackButton } from '@/features/BackButton';
import { innerUrls } from '@/shared/constants';
import { ReactComponent as StarRating } from '@/shared/icons/Rating5.svg';
import { ReactComponent as Star } from '@/shared/icons/star.svg';
import { useMetaTag } from '@/shared/lib/hooks';
import { Button, Modal } from '@/shared/ui';
import { useRouter } from 'next/router';
import { useWindowSize } from 'usehooks-ts';

import { Info } from '../Tabs/Info';
import { Purchase } from '../Tabs/Purchase';
import { Review } from '../Tabs/Review';
import cs from './ActiveTab.module.scss';

export type BoughtCourseTabVariants = 'info' | 'review' | 'purchase';

export const tabs: Record<
  BoughtCourseTabVariants,
  FC<{ openModal?: (i: boolean) => void; isOpen?: boolean; ratingId?: number; productId?: string; canEdit?: boolean }>
> = {
  info: Info,
  review: Review,
  purchase: Purchase,
};
type Props = {
  tab: BoughtCourseTabVariants;
  courseTitle: string;
  courseId: number;
  ratingId?: number;
  productId: number;
};
export const ActiveTab = ({ tab = 'info', courseTitle, courseId, ratingId, productId }: Props) => {
  const [isOpen, setIsOpen] = React.useState(false);
  const { width } = useWindowSize();
  const router = useRouter();

  const Component = tabs[tab] || tabs['info'];

  const handleTab = (tab: BoughtCourseTabVariants) => {
    router.push(innerUrls.boughtCourse(tab, Number(router.query.id)));
  };
  useMetaTag(isOpen, '#999999');
  return (
    <>
      <div className={cs.wrapper}>
        {width < 1024 && (
          <div className={cs.btns}>
            <BackButton
              className={cs.back}
              defaultBackLink={
                router.query.tab === 'info'
                  ? innerUrls.profile('purchases')
                  : innerUrls.boughtCourse('info', router.query.id as string)
              }
              text={router.query.tab === 'info' ? 'Покупки' : 'Назад'}
            />
          </div>
        )}
        {Component && (
          <Component isOpen={isOpen} openModal={setIsOpen} productId={String(productId)} ratingId={ratingId} />
        )}
      </div>
      <Modal className={cs.modal} isMobile isOpen={isOpen} onCloseClick={() => setIsOpen(false)} zIndex={1000}>
        <span className={cs.title}>{courseTitle}</span>
        <div className={cs.options}>
          <Button
            className={cs.option}
            data-testid={`link-course-${courseId}`}
            href={innerUrls.course(courseId)}
            link
            rel="noopener noreferrer"
            target="_blank"
          >
            <Notes /> О материале
          </Button>
          <Button
            className={cs.option}
            data-testid="button_rating"
            onClick={() => {
              handleTab('review');
              setIsOpen(false);
            }}
          >
            {ratingId ? (
              <span className={cs.already}>
                <StarRating /> Изменить отзыв
              </span>
            ) : (
              <>
                <Star /> Оставить отзыв
              </>
            )}
          </Button>
          <Button
            className={cs.option}
            data-testid="button-about_course"
            onClick={() => {
              handleTab('purchase');
              setIsOpen(false);
            }}
            style={{ border: 'none' }}
          >
            <Wallet /> О покупке
          </Button>
        </div>
      </Modal>
    </>
  );
};
